<template>
  <div class="inter">
    <loading v-bind:state="state"></loading>
    <ul class="other_1">
      <li class="main_li">
        <p>昵称：{{detail.name}}</p>
        <!--<p>{{detail.userIdentity}}</p>-->
      </li>
      <li class="main_li">
        <p>订单号：{{detail.nid}}</p>
        <p v-text="dateFormat()"></p>
      </li>
    </ul>
    <div class="other_2">
      <img class="icon" :src="this.$Public.iconImg + 'address.svg'" alt="">
      <p class="add">{{detail.address}}</p>
      <!--<p class="receive_name">收货人：{{detail.receiver}}</p>-->
    </div>
    <div class="other_m">
      <p class="text_l">购买商品</p>
      <item-goods-order v-for="(res,index) in goods"
                        :key="index"
                        :img-url="res.good.pic"
                        :name="res.good.title"
                        :describe="getDes(res)"
                        :price="res.price"
                        :count="res.num"></item-goods-order>
      <div class="other_mb">
        <p class="add2">实付积分</p>
        <p class="add3">积分{{detail.money}}</p>
      </div>
    </div>
    <div class="space"></div>
    <div class="retreat">
      <p class="add2">退款</p>
      <p class="add6" v-text="retreat" @click="Retreat" ref="retreatRef"></p>
      <img :src="getIcon('arrow_right_hui')" class="icon-right"/>
    </div>
    <!--<div class="other_lost">-->
    <!--<p class="rec_h add2">-->
    <!--收到返利-->
    <!--</p>-->
    <!--<div class="rec_rebate_t">-->
    <!--<p class="rec add4" v-show="detail.subordinate !=''">下级:<span-->
    <!--class="add2">积分{{detail.subordinate}}</span></p>-->
    <!--<p class="rec add4" v-show="detail.total !=''">总代理商:<span class="add2">积分{{detail.total}}</span></p>-->
    <!--<p class="rec add4" v-show="detail.region !=''">区域订单:<span class="add2">积分{{detail.region}}</span></p>-->
    <!--<p class="add4" style="color:main-color">合计:<span class="add5">2.0000积分</span></p>-->
    <!--</div>-->
    <!--</div>-->
    <link-opinion></link-opinion>
    <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"></popup>
  </div>
</template>
<script type="text/ecmascript-6">
  import LinkOpinion from '@/components/common/LinkOpinion';
  import ItemGoodsOrder from '@/components/spread/ItemGoodsOrder';
  import Public from '@/assets/js/public';
  import Moment from 'moment';

  export default {
    name: `memorderdetail`,
    components: {LinkOpinion, ItemGoodsOrder},
    data() {
      return {
        state: true,
        detail: {}, // 数据主体,
        goods: {}, // 商品信息,
        retreat: '', // 退换货文本
        statusSec: true, // 支付后状态
        pupData: {
          des: '',
          sure: '确定',
          cancel: '取消'
        }
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getIcon(icon) {
        return Public.iconImg + icon + '.svg';
      },
      dateFormat() {
        // 时间
        return Moment(this.detail.created * 1000).format('YYYY-MM-DD HH:mm');
      },
      getDetail() {
        let orderId = this.$route.query.id;
        this.$Spread.selectDetailNew({id: orderId}).then(res => {
          this.state = false;
          let dataMind = res.data;
          dataMind.status = this.$route.query.status;
          console.log(res);
          console.log(dataMind, 'dataMind');
          this.detail.name = dataMind.rec_user; // 用户名
//        this.detail.userIdentity = dataMind.rec_user;
          this.detail.nid = dataMind.id; // 订单号
          this.detail.created = dataMind.created; // 创建时间
          console.log(typeof this.detail.created, 'this.detail.created ');
          this.detail.money = dataMind.money; // 总额
          this.detail.address = dataMind.rec_province + dataMind.rec_city + dataMind.rec_area + dataMind.rec_detail; // 收货地址
          this.goods = dataMind.buy_list;
          this.detail.status = dataMind.status; // 是否可以退货
          this.toRetreat();
        }, () => {
          this.state = false;
        });
      },
      getDes(res) {
        let valText = '';
        res.good.attr.map((val) => {
          console.log(val, 'value');
          valText += val.value + ' ';
        });
        return valText;
      },
      Retreat() {
        // 退款方法
        // 先判断是否能退款
        console.log(this.statusSec);
        if (this.detail.status === 'pay' && this.statusSec === true) {
          this.pupData.des = '您确定要退款吗？';
          this.$refs.popupref.switchState();
        } else {
        }
      },
      toRetreat() {
        if (this.detail.status === 'pay') {
          let createTime = parseInt(this.detail.created) * 1000;
          let nowTime = new Date().getTime();
          let second = nowTime - createTime;
          const standard = 24 * 60 * 60 * 1000;
          if (second > standard) {
            this.statusSec = false;
            this.retreat = '已超时，无法退款';
          } else {
            this.retreat = '下单未满24小时，可退款';
          }
        } else if (this.detail.status === 'create') {
          this.retreat = '订单未支付';
        } else if (this.detail.status === 'refund') {
          this.retreat = '已退款';
        } else if (this.detail.status === 'deal') {
          this.retreat = '已进入发货流程,不能退款';
        }
      },
      cancelFun() {
        this.$refs.popupref.switchState();
      },
      sureFun() {
        this.$refs.popupref.switchState();
        this.$Spread.ToReFund({
          type: 'refund',
          id: this.detail.nid
        }).then(res => {
          if (res.status === 'ok') {
            this.retreat = '已退款';
            this.detail.status = 'refund';
          }
        }, () => {
          this.state = false;
        });
      }
    },
    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      to.meta.keepAlive = true;
      next();
    }
  }
  ;
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .icon-right {
    width 3vw
  }

  .retreat {
    flex-x();
    background #fff;
    padding 0 3vw;
    height 12vw;
  }

  .space {
    space();
  }

  .rec_h {
    width 100vw
  }

  .rec_rebate_t p {
    line-height: vw(25px);
    flex-x();
    padding-left: 8vw
  }

  .rec_rebate_t {
    flex: 1;
    flex-y();
    width 100%;
    align-items flex-end
  }

  .other_lost {
    flex-y();
    width: 100vw;
    box-sizing border-box;
    align-items: flex-start;
    padding: 3vw;
    background: #fff;
    margin-top: 10px;
  }

  .other_m {
    flex-y();
    align-items: stretch;
    padding: 0 3vw;
    box-sizing: border-box;
    width: 100vw;
    background: #fff;
    & .text_l {
      line-height: vw(40px);
      word(14px, #000);
      bor-b(2px, #f5f5f5)
    }
  }

  .other_1 {
    flex-y();
    align-items: stretch;
    justify-content: center;
    padding: 0 3vw;
    width: 100vw;
    box-sizing: border-box;
    height: vw(68px);
    background: #fff
    & li {
      flex-x();
      & p {
        word(14px, #000);
        line-height: vw(20px)
      }
    }
  }

  .other_2 {
    flex-x();
    align-items: center;
    padding: 0 3vw;
    width: 100vw;
    box-sizing: border-box;
    height: vw(43px);
    background: #fff;
    margin: 10px 0;
    & .add {
      flex: 1
    }
  }

  .other_mb {
    flex-x();
    align-items: center;
    box-sizing: border-box;
    height: vw(40px);
    background: #fff;
  }

  .rec span {

  }

  .icon {
    width: 5vw
  }

  .add2 {
    word(14px, #000);
  }

  .add3 {
    word(16px, main-color);
  }

  .add4 {
    word(14px, #000);
  }

  .add5 {
    word(20px, main-color);
  }

  .add6 {
    word(14px, main-color);
    flex: 1;
    text-align: right;
  }
</style>
